<template>
  <div class="container">
    <div class="img-list">
      <div class="img-content" v-for="(image,index) in picturelist" :key="index">
        <img :src="url_prefix + image.path">
        <div class="name">
          <el-input v-model="image.name" placeholder="请输入内容" @blur="submitname"></el-input>
        </div>
        <div class="describe">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            resize="none"
            v-model="image.tags" @blur="submittags">
          </el-input>
        </div>
        <!-- 删除icon -->
        <div class="del">
          <i @click="handleFileRemove(image,index)" class="el-icon-delete"></i>
        </div>
        <!-- 放大icon -->
        <div class="layer" @click="handleFileEnlarge(image.url)">
          <i class="el-icon-view"></i>
        </div>
      </div>
      <el-upload
        class="upload-demo myUpload"
        drag
        multiple
        :limit="26"
        :action="url"
        :on-success="handleImageSuccess"
        :before-upload="beforeImageUpload"
        list-type="picture"
        :show-file-list="false">
        <i class="el-icon-picture uploaderIcon"></i>
        <div class="el-upload__text" style="padding:11px">将图片拖拽到这里上传，或<em>点击上传</em></div>
      </el-upload>
    </div>
    <el-dialog title="" :visible.sync="isEnlargeImage" size="large" :modal-append-to-body="false" top="8%" width="60%">
      <img @click="isEnlargeImage = false" style="width:100%;" :src="enlargeImage">
    </el-dialog>
  </div>
</template>
<script>
import store from "@/store";
let upload_option = {
  upload_urlss:
    process.env.BASE_API +
    process.env.PREFIX +
    "/zcm/file/draftGalleryFile?userid=" +
    store.getters.userid
};
// console.log(upload_option);
const defaultdraftGallery = {
  addTime: "",
  addUser: "",
  articleId: "",
  desc: "",
  height: "",
  id: "",
  materialId: "",
  orders: "",
  pictureId: "",
  sourceurl: "",
  tags: "",
  width: "",
  name: "",
  imagesUpload: ""
};
export default {
  name: "PhotoAlbum",
  inject: ["reloads"],
  props: {
    picturelist: {
      type: Array
    }
  },
  data() {
    return {
      url:
        process.env.BASE_API +
        process.env.PREFIX +
        "/zcm/file/draftGalleryFile?userid=" +
        store.getters.userid,
      draftGallery: Object.assign({}, defaultdraftGallery),
      upload_option,
      isEnlargeImage: false,
      enlargeImage: "",
      url_prefix: process.env.BASE_API + "/",
      draftGalleryList: Object.assign([], this.picturelist)
    };
  },
  methods: {
    submitname() {
      this.$emit("successList", this.picturelist);
    },
    submittags() {
      this.$emit("successList", this.picturelist);
    },
    handleImageSuccess(res, file, fileList) {
      const listUrl = {
        pictureId: res.data.fileid,
        sourceurl: res.data.fileurl,
        name: file.name,
        path: res.data.fileurl
      };
      this.picturelist.push(listUrl);
      this.$emit("successList", this.picturelist);
    },
    beforeImageUpload(file) {
      console.log("hahah", file);
      var path = require("path");
      // 格式化路径
      var imgType = path.extname(file.name).slice(1);

      if (
        imgType != "jpg" &&
        imgType != "png" &&
        imgType != "bmp" &&
        imgType != "gif" &&
        imgType != "svg"
      ) {
        this.$message.error(
          "请上传正确格式的文件 格式包括: jpg,png,bmp,gif,svg!"
        );
        return false;
      }

      const isLt2M = file.size / 1024 / 1024 < 10;
      // const isPNG = file.type === 'image/png'
      // const isJPG = file.type === 'image/jpeg'
      // const isGIF = file.type === 'image/gif'
      // if (!isJPG && !isPNG && !isGIF) {
      //   this.$message.error('上传图片只能是 JPG 或者 PNG 格式!')
      // }
      if (this.picturelist.length >= 16) {
        this.$message.error("最多上传16张图片");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 10MB!");
        return false;
      }
      // return isLt2M && (isPNG || isJPG || isGIF);
    },
    handleFileEnlarge(_url) {
      // 放大图片
      if (_url) {
        this.enlargeImage = _url;
        this.isEnlargeImage = !this.isEnlargeImage;
      }
    },
    handleFileRemove(file, i) {
      // 删除图片
      console.log(i);
      console.log("5");
      console.log(this.picturelist);
      if (!file.path) {
        return false;
      }
      const that = this;
      this.$confirm("是否删除此图片？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          that.picturelist.splice(i, 1);
        })
        .catch(meg => console.log(meg));
    }
  }
};
</script>

<style scoped>
.container {
  width: 96%;
  margin-left: 20px;
  background: #fff;
  min-height: 100%;
  padding: 20px;
  border: 2px dashed #eeeeee;
}
/*图集CSS开始*/
.upload-demo {
  float: left;
  width: 600px;
  height: 200px;
  padding: 15px;
  margin: 5px 20px 20px 20px;
}
.describe {
  margin-top: 10px;
}
.describe textarea {
  font-size: inherit;
  color: #606266;
}

.img-list {
  overflow: hidden;
  width: 90%;
  margin-top: 20px;
}
.img-list .img-content {
  float: left;
  position: relative;
  display: inline-block;
  width: 400px;
  height: 360px;
  padding: 5px;
  margin: 5px 20px 20px 0;
  border: 1px solid #d1dbe5;
  border-radius: 4px;
  transition: all 0.3s;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}
.img-list .img-content img {
  display: block;
  width: 100%;
  height: 190px;
  margin: 0 auto;
  border-radius: 4px;
}
.img-list .img-content .name {
  margin-top: 10px;
}

.img-list .img-content:hover .del,
.img-list .img-content:hover .layer {
  opacity: 1;
}
.img-list .img-content .del,
.img-list .img-content .layer {
  opacity: 0;
  transition: all 0.3s;
}
.img-list .img-content .del {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: #8492a6;
  cursor: pointer;
  font-size: 1.1em;
}
.img-list .img-content .layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 200px;
  color: #fff;
  text-align: center;
  z-index: 5;
  background-color: rgba(0, 0, 0, 0.4);
}
.img-list .img-content .layer i {
  font-size: 1.6em;
  margin-top: 80px;
}
/*图集CSS结束*/
</style>
